<template>
  <nav class="menu-container">
    <RouterLink v-for="item in items" :key="item.name" :to="{ name: item.name }" :exact="item.exact" active-class="selected">
      <div class="icon">
        <Icon :type="item.icon" />
      </div>
      <span>{{ item.title }}</span>
    </RouterLink>
  </nav>
</template>

<script>
import Icon from '@/components/Icon'
export default {
  components: {
    Icon
  },
  data() {
    return {
      items: [
        {
          name: 'Home',
          title: '首页',
          icon: 'home',
          exact: true
        },
        {
          name: 'Blog',
          title: '文章',
          icon: 'blog',
          exact: false
        },
        {
          name: 'About',
          title: '关于我',
          icon: 'about',
          exact: true
        },
        {
          name: 'Project',
          title: '项目&效果',
          icon: 'code',
          exact: true
        },
        {
          name: 'Message',
          title: '留言板',
          icon: 'chat',
          exact: true
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/styles/var.less';
.menu-container {
  color: @gray;
  margin: 24px 0;
  a {
    padding: 0 50px;
    display: block;
    display: flex;
    align-items: center;
    height: 45px;
    .icon {
      width: 24px;
    }
    &:hover {
      color: #fff;
    }
    &.selected {
      background: darken(@words, 3%);
    }
  }
}
</style>
